<template>
    <view class="container result paddingBottomBar" v-if="order" :style="themeColor">
        <view class="pay-head" v-if="data.State == 1">
            <view>订单已关闭</view>
        </view>
        <view class="pay-head" v-else>
            <view>待支付</view>
            <!-- <text v-if="data.OrderValidTimers!=0 && !isTimeOut">交易将在{{getTimes(times) }}后自动关闭，请及时付款！</text> -->
        </view>
        <view class="pay-body">
            <view class="pay-time-price">
                <view>订单编号：{{ order.Sn }}</view>
                <view
                    >付款金额：<text class="moneyicon">¥</text
                    ><text class="strong">{{ paynumber ? paynumber : order.PayMoney }}</text></view
                >
            </view>
            <view class="bank-way" :class="{ noBorder: from == 1 }">
                <text v-if="from != 1">支付方式：</text>
            </view>
            <view class="bank-list" style="border-bottom: none" @click="selectPay" v-if="from != 1">
                <view class="bank-list-name">
                    <image v-if="payWay == 0" class="icon-bank" src="/static/img/offline_pay.png"></image>
                    <image v-if="payWay == 1" class="icon-bank" src="/static/img/bank/yepay.png"></image>
                    <image v-if="payWay == 10" class="icon-bank" src="/static/img/bank/bank.png"></image>
                    <view class="uni-input payname">{{ PayName }}</view>
                </view>
                <uni-icons class="icon-right" type="arrowright"></uni-icons>
            </view>
            <view class="pay-way-offline">
                <view class="bank-info">
                    <view class="bank-info-title" v-if="showBank && payWay == 0">请选择交易收款方账号</view>
                    <view class="bank-main" v-if="showBank && payWay == 0">
                        <view class="bank-list" @click="$refs.payToAccount.open()">
                            <view class="bank-list-name">
                                <image
                                    v-if="showBank.AccountType == 1"
                                    class="icon-bank"
                                    src="/static/img/bank/wxpay.png"></image>
                                <image
                                    v-if="showBank.AccountType == 2"
                                    class="icon-bank"
                                    src="/static/img/bank/zfbpay.png"></image>
                                <image
                                    v-if="showBank.BankTypeId > 0"
                                    class="icon-bank"
                                    src="/static/img/bank/ylpay.png">
                                </image>
                                <view class="uni-input payname">{{ showBank.AccountTypeName }}</view>
                            </view>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                        <view class="bank-text">
                            <!--银行卡-->
                            <view v-if="showBank.BankTypeId > 0">
                                <view class="flex-v-c">开 户 行：{{ showBank.BankTypeName }}{{ showBank.Branch }}</view>
                                <view class="flex-v-c">收款账号：{{ showBank.Number }}</view>
                                <view
                                    @click="
                                        copy(
                                            '开户行:' +
                                                showBank.BankTypeName +
                                                showBank.Branch +
                                                ',收款账号:' +
                                                showBank.Number +
                                                ',收款人:' +
                                                showBank.AccountName,
                                        )
                                    "
                                    class="flex-s-s"
                                    >收 款 人：{{ showBank.AccountName }} <text class="copy">复制</text></view
                                >
                                <view class="mobilepay" v-if="showBank.PayQrUrl">
                                    <image :src="easyGetImgUrl(showBank.PayQrUrl)"></image>
                                </view>
                            </view>
                            <view class="mobilepay" v-else>
                                <image
                                    :src="easyGetImgUrl(showBank.PayQrUrl)"
                                    mode="widthFix"
                                    :data-src="easyGetImgUrl(showBank.PayQrUrl)"
                                    @tap="previewImage1"></image>
                                <text>请使用{{ showBank.AccountTypeName }}识别二维码完成支付</text>
                            </view>
                        </view>
                    </view>
                    <view class="bank-img" v-if="payWay == 0">
                        <text class="bank-img-title">上传打款凭证</text>
                        <view class="img-cell">
                            <view class="">
                                <view class="add-img" @tap="chooseImage">
                                    <uni-icons type="camera" size="80"></uni-icons>
                                    <text>添加图片</text>
                                </view>
                            </view>
                            <block v-for="(image, index) in imageList" :key="index">
                                <view class="img-item">
                                    <image
                                        class="img"
                                        :src="easyGetImgUrl(image)"
                                        :data-src="easyGetImgUrl(image)"
                                        @tap="previewImage"></image>
                                    <view @click="del(index)">
                                        <uni-icons class="btn-del" type="closeempty" customIcons="icon-white">
                                        </uni-icons>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </view>
                    <view class="flex">
                        <text>备注：</text>
                        <input type="text" placeholder="请填写备注信息" v-model="remark" class="remark" />
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <button class="btn btn-fill btn-success" @click="pay">提交</button>
        </view>
        <uni-popup type="bottom" ref="payWay" background-color="#fff" :safe-area="false">
            <pay-way
                :payPrice="String(order.PayMoney)"
                v-if="payList.length > 0"
                :payList="payList"
                @cancel="cancel"
                @select="select"></pay-way>
        </uni-popup>
        <uni-popup type="bottom" ref="payToAccount" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择收款方账号</text></view>
                <view class="pay-way">
                    <view class="pay-way-item" v-for="item in bankList" @click="selectAccount(item)">
                        <image class="pay-icon" :src="getOfflinePayTypeIcon(item.AccountType)"></image>
                        <text v-if="item.AccountType == 0">{{ item.BankTypeName }}{{ item.Branch }}</text>
                        <text v-else>{{ item.AccountTypeName }}</text>
                    </view>
                </view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { copyFn } from "@/uni-sub-base/utils/utils.js"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import { GetPayOrderId, getOrderDetail, XianPayNew } from "@/service/api/order.js"
import { getList } from "@/service/api/businessPay.js"
import { payForApi, helPayFn } from "@/utils/orderUtil.js"
import { uploadImage } from "@/service/api/file.js"
import { sortBykey } from "@/uni-sub-base/utils/utils.js"
import payWay from "@/components/common/pay-way.vue"
import config from "@/config/config.js"
import storage from "@/uni-sub-base/utils/storage.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import permision from "@/utils/permission.js"
export default {
    components: {
        cardGroupCell,
        payWay,
		privacyAgreement
    },
    data() {
        return {
            paynumber: null,
            PayName: "",
            payWay: 0,
            arrayindex: 0,
            orderId: 0,
            showBank: null,
            order: null,
            data: {},
            limitTime: "",
            timer: null,
            times: "",
            remark: "",
            imageList: [],
            payList: [],
            isTimeOut: false,
            from: 0,
            bankList: [],
            accountId: 0,
            NeedUploadProof: 0,
        }
    },
    onLoad(e) {
        this.orderId = e.orderId
        if (e.paynumber) {
            this.paynumber = e.paynumber
        }
        if (e.from) {
            this.from = e.from
        }
        if (e.accountId) {
            this.accountId = e.accountId
        }
    },
    mounted() {
        if (this.orderId == 0) {
            this.easyToast("获取订单失败")
        } else {
            this.getOrderDetail()
            this.getPayList()
        }
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        copy(text) {
            copyFn(text)
        },
        //显示时间格式化
        getTimes(times) {
            let min = Math.floor(times / 60)
            let s = times % 60
            let showMin = min < 10 ? `0${min}` : `${min}`
            let showS = s < 10 ? `0${s}` : `${s}`
            let showTime = showMin + ":" + showS
            return showTime
        },
        selectPay() {
            if (this.data.OrderValidTimers != 0 && this.isTimeOut) {
                return
            }
            this.$refs.payWay.open()
        },
        //倒计时
        setTimer() {
            this.timer = setInterval(() => {
                this.times--
                if (this.times <= 0) {
                    this.isTimeOut = true
                    clearInterval(this.timer)
                    this.checkGoBack()
                }
            }, 1000)
        },
        //获取订单详情
        getOrderDetail() {
            let param = {
                id: this.orderId,
                singleflag: 0,
                isXianXia: 1,
            }
            let path = "?id=" + this.orderId + "&isXianXia=1"
            GetPayOrderId(path).then((res) => {
                if (res.State) {
                    this.data = res.Data
                    if (res.Data.BankList && res.Data.BankList.length > 0) {
                        if (this.accountId) {
                            this.showBank = res.Data.BankList.find((e) => {
                                return e.ID == this.accountId
                            })
                        } else {
                            this.showBank = res.Data.BankList[0]
                        }

                        this.bankList = res.Data.BankList
                        this.order = res.Data.Order
                        this.times = this.data.Minutes * 60 + this.data.Seconds
                        this.isTimeOut = this.data.Minutes < 0 || this.data.Seconds < 0
                        if (!this.isTimeOut) {
                            this.setTimer()
                        }
                    }
                } else {
                    this.easyToast(res.Data)
                    this.checkGoBack()
                }
            })
        },
        //获取支付方式
        getPayList() {
            let param = {}
            getList(param).then((res) => {
                this.payList = res.Data
                this.payList.forEach((e, index) => {
                    //线下支付
                    if (e.PaymentPayWay == 0) {
                        this.NeedUploadProof = e.NeedUploadProof
                    }
                })
                this.payList = sortBykey(this.payList, "PaymentPayWay")
                this.PayName = this.payList[0].PayName
                this.payWay = this.payList[0].PaymentPayWay
            })
        },
        pay() {
            let paths = "?id=" + this.orderId
            GetPayOrderId(paths).then((ress) => {
                if (ress.State) {
                    if (ress.Data.Order.State == 11) {
                        this.easyToast("订单已取消，无法支付")
                        return
                    } else {
                        if (this.NeedUploadProof != 0) {
                            if (this.imageList.length == 0) {
                                this.easyToast("请上传打款凭证")
                                return
                            }
                        }
                        let param = {
                            orderId: this.orderId,
                            opUserId: this.order.UserId,
                            payWay: this.payWay,
                            payType: 4,
                            payAccountType: 0,
                            type: 4,
                            price: this.paynumber ? this.paynumber : this.order.PayMoney,
                            remark: this.remark,
                        }
                        if (this.payWay == 0) {
                            param.isUseBalance = false
                            param.bankInfo = this.showBank
                            param.Images = this.imageList.join(",")
                        }

                        if (this.payWay == 12) {
                            //云支付
                            this.helPayOrder(this.orderId)
                        } else {
                            if (this.from == 1) {
                                XianPayNew(param).then((res) => {
                                    if (res.State == 1) {
                                        //跳转到支付结果
                                        this.easyReLaunch("/pages_shop/packet/order/payResult?orderId=" + this.orderId)
                                    } else {
                                        this.easyToast(res.Msg)
                                    }
                                })
                            } else {
                                payForApi(param).then((res) => {
                                    if (res.State == 1) {
                                        //跳转到支付结果
                                        this.easyReLaunch("/pages_shop/packet/order/payResult?orderId=" + this.orderId)
                                    } else {
                                        this.easyToast(res.Msg)
                                    }
                                })
                            }
                        }
                    }
                }
            })
        },
        helPayOrder(orderId) {
            helPayFn(this, orderId, 0).then((res) => {
                setTimeout(() => {
                    this.easyReLaunchToHome()
                    storage.setCache("miniProgram", true)
                }, 1000)
            })
        },
        select(item) {
            this.payWay = item.PaymentPayWay
            this.PayName = item.PayTypeName
            this.$refs.payWay.close()
        },
        cancel() {
            this.$refs.payWay.close()
        },
        //选择图片
		//#ifdef APP
		async chooseImage() {
			const result = await permision.premissionCheck("EXTERNAL_STORAGE")
			if(result == 1) {  
			    // 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ["album", "camera"], //从相册选择
				    success: function (res) {
				        that.upLoadPicFn(res)
				    },
				})
			}
		},
		//#endif
		// #ifndef APP
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
		// #endif
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.imageList.push(e.Data.FullPath)
                }
            })
        },
        //更新列表
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
        checkGoBack() {
            //自动关闭回到首页 TODO 什么条件不返回
            // this.upOrderView()
            // this.easyGoBack()
        },
        selectAccount(item) {
            this.$refs.payToAccount.close()
            this.showBank = item
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
        previewImage1(e) {
            let PayQrUrl = [this.easyGetImgUrl(this.showBank.PayQrUrl)]
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: PayQrUrl,
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}

.bottom-bar {
    z-index: 9;

    .btn {
        width: 690rpx;
        height: 90rpx;
        border-radius: 45rpx;
        font-size: 32rpx;
    }
}

.result {
    .tip {
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .result-tip {
            margin-bottom: 20rpx;
        }
    }
}

.pay-head {
    background: $app-color-main;
    height: 210rpx;
    color: #fff;
    font-size: 36rpx;
    padding: 50rpx 0 0 50rpx;
    font-weight: bold;
    border-radius: 0rpx 0rpx 120rpx 120rpx/0rpx 0rpx 40rpx 40rpx;

    text {
        color: #ffffff;
        font-weight: normal;
        position: relative;
        z-index: 1000000000000;
    }

    view {
        position: relative;
        z-index: 1000000000000;
    }

    &:after {
        content: "";
        width: 100%;
        height: 300rpx;
        position: absolute;
        left: 0%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}

.pay-body {
    position: relative;
    margin: $app-page-padding;
    background: #ffffff;
    border-radius: 12rpx 12rpx 0 0;
    padding-bottom: 130rpx;

    .img-item:nth-child(3n + 3) {
        margin-right: 0;
    }
}

.pay-time-price {
    position: relative;
    padding: 0 $app-page-padding;
    height: 168rpx;
    box-shadow: 0px 2rpx 13rpx 0rpx rgba(0, 0, 0, 0.23);
    border-radius: 0 0 12rpx 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -120rpx;

    & > view {
        color: #333;
        font-size: 28rpx;
        margin: 10rpx 0;

        .moneyicon {
            color: #ff0000;
            font-size: 26rpx;
        }

        .strong {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff0000;
        }
    }
}

.bank-info {
    background: #f4f4f4;
    margin: $app-page-padding;
    margin-top: 0;

    .bank-info-title {
        font-size: 26rpx;
        font-weight: 500;
        padding: 24rpx;
    }
}

.bank-main {
    border: 1px solid #cccccc;
}

.bank-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    height: 120rpx;
    padding: 0 24rpx;
    border-bottom: 1px solid #eaeaea;

    image {
        width: 65rpx;
        height: 64rpx;
        margin-right: 20rpx;
    }

    .bank-list-name {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

.bank-text {
    color: #666666;
    font-size: 22rpx;
    line-height: 2;
    padding: 24rpx;
    background: #ffffff;

    .qrcode {
        width: 200rpx;
        height: 200rpx;
        justify-content: center;
    }
}

.mobilepay {
    text-align: center;

    image {
        width: 240rpx;
        height: 240rpx;
        display: block;
        margin: 30rpx auto;
    }
}

.flex {
    display: flex;
    justify-content: flex-start;
    padding: 24rpx;
    align-items: center;

    .remark {
        font-size: 24rpx;
        padding: 24rpx;
        display: flex;
        flex: 1;
    }
}

.bank-img {
    margin-bottom: -60rpx;

    .img-cell {
        margin-bottom: 0;
    }
}

.payname {
    font-size: 28rpx;
}

.bank-way {
    padding: $app-page-padding;
    border-bottom: solid 1rpx #eaeaea;
}
.noBorder {
    border-bottom: none;
}
.copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88rpx;
    height: 42rpx;
    background: rgba(50, 161, 250, 0.11);
    border-radius: 22rpx;
    color: #32a1ff;
    font-size: 24rpx;
}
</style>
